import React, { useEffect, useState } from 'react';
import { withRouter } from 'react-router-dom';
import { Breadcrumb, Form, Input, Button, Spin, message, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import Api, { Url } from '../../../util/apiUrl.js';
import style from './index.module.css';
import { dateFormat } from '../../../util/data';

const layout = {
  labelCol: {
    span: 3,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 3,
    span: 16,
  },
};

const AddLive = (props) => {
  console.log('个人信息props', props);

  const [isLoading, setIsLoading] = useState(false);
  const [fileList, setFileList] = useState([
    // {
    //   uid: '-1',
    //   name: 'xxx.png',
    //   status: 'done',
    //   url: 'http://www.baidu.com/xxx.png',
    // },
  ]);

  useEffect(() => {
    // getPersonalInfo();
  }, []);

  const myInfo = {};
  //   const getPersonalInfo = () => {
  //     Api.getPersonalInfo()
  //       .then((res) => {
  //         console.log('获取到的个人信息res', res);
  //         formInfo.setFieldsValue(res.data[0]);
  //       })
  //       .catch((e) => {
  //         console.log('err', e);
  //       });
  //   };

  const [formInfo] = Form.useForm();
  const infoOnFinish = (values) => {
    console.log('添加生活Success:', values);
    setIsLoading(true);
    values.updateTime = dateFormat('YYYY-mm-dd HH:MM', new Date());
    values.avatar =window.localStorage.getItem('avatar')
    values.imgs = fileList.map((i) => i.reallyUrl).join(',');
    console.log('添加生活 改后:', values);
    Api.addLive({ ...values })
      .then((res) => {
        console.log('提交成功', res);
        setIsLoading(false);
        message.success('新增信息成功');
        props.history.push('/admin/live');
      })
      .catch((err) => {
        console.log('提交失败', err);
        setIsLoading(false);
        message.error('新增信息失败');
      });
  };
  const infoOnFinishFailed = (errorInfo) => {
    console.log('添加生活Failed:', errorInfo);
  };

  // 上传的配置
  const uploadHandleChange = async (info) => {
    console.log('info', info);
    let fileList = [...info.fileList];
    fileList = fileList.slice(-9);
    fileList = fileList.map((file,idx) => {
      if (file.response) {
        file.url = Url.replace('/admin/', '') + file.response[0].url;
        file.reallyUrl = Url.replace('/admin/', '') +'/public/admin/liveImg/' + file.response[0].wsName
      }
      return file;
    });
    // let fileList = [...info.fileList];
    // if (info.fileList[0] && info.fileList[0].response) {
    //   fileList = [
    //     {
    //       ...info.fileList[0],
    //       url: Url.replace('/admin/', '') + info.fileList[0].response.url,
    //       // reallyUrl: Url.replace('/admin/', '') + info.fileList[0].response.reallyUrl,
    //       reallyUrl:Url.replace('/admin/', '') +'/public/admin/liveImg/' + info.fileList[0].response.wsName
    //     },
    //   ];
    // }
    setFileList(fileList);
    console.log('fileList', fileList);
  };
  // const uploadOnRemove=()=>{
  //   setFileList([])
  // }
  const props1 = {
    action: Url + 'upImgToTemporary',
    onChange: uploadHandleChange,
    // onRemove:uploadOnRemove,
    multiple: true,
  };

  return (
    <>
      {isLoading ? (
        <div className={style.container}>
          <Spin size="large" className={style.spin} />
        </div>
      ) : null}
      <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>生活</Breadcrumb.Item>
        <Breadcrumb.Item>添加生活</Breadcrumb.Item>
      </Breadcrumb>
      <Form
        form={formInfo}
        {...layout}
        name="infoAlert"
        initialValues={myInfo}
        onFinish={infoOnFinish}
        onFinishFailed={infoOnFinishFailed}
      >
        <Form.Item
          label="标题"
          name="title"
          rules={[{ required: true, message: '请输入标题' }]}
        >
          <Input placeholder="请输入标题" />
        </Form.Item>

        {/* <Form.Item
                label="技能及简要信息"
                name="skillType"
              >
                <Input placeholder="请输入个人技能和简要信息 , 多个以 | 分隔" />
              </Form.Item> */}
        <Form.Item label="内容" name="content">
          <Input.TextArea rows={4} placeholder="请输入内容" />
        </Form.Item>
        <Form.Item label="图片" name="imgs">
          <Upload {...props1} fileList={fileList}>
            <Button>
              <UploadOutlined /> 添加图片
            </Button>
          </Upload>
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            添加
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default withRouter(AddLive);
